<template>
  <div>
    <!-- 顶部区域 -->
    <van-nav-bar title="前端最牛逼.vant" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="empty" v-if="carlist.length===0">
      <img src="../assets/cart_empty.9f725555.png" alt />
      <p style="color:#ccc">购物车空空如也</p>
      <van-button square text="再逛逛" size="mini" class="goshopping" to="/goods/list" />
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 购物车列表页面 -->
      <van-swipe-cell v-for="(item,index) in carlist" :key="item.id" :on-close="onClose" :name="item.id">
        <template slot="right" right-width="60px">
          <van-button square type="danger" text="删除"  />
        </template>
        <van-card
          :num="$store.state.car[index].cou"
          :price="item.sell_price"
          :title="item.title"
          :thumb="item.thumb_path"
        >
          <div slot="footer">
            <van-stepper v-model="$store.state.car[index].cou" @change="addcar({
              id:item.id,
              cou:$store.state.car[index].cou
              })" integer />
          </div>
        </van-card>
      </van-swipe-cell>
    </van-pull-refresh>
    <!-- 底部合计确认订单 -->
    <van-submit-bar :price="totalPrice" :button-text="submitBarText" @submit="onSubmit" />
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import { Dialog } from 'vant'
export default {
  data() {
    return {
      active: '',
      isLoading: false,
      id: [],
      carlist: [],
     
    }
  },
  created() {
    this.getcarlist()
  },
  mounted() {},
  computed: {
   
    ...mapState(['car']),
    submitBarText() {
      return '提交订单'
    },
    totalPrice() {
      let sum = 0
      //  console.log(this.$store,888);
      this.$store.state.car.forEach(item => 
      sum += item.cou * item.price   
      )
     return sum *100 
    }
  },
  mounted() {
     this.getcarlist()
  },
  methods: {
     ...mapMutations(['addcar','delete']),
    onClickLeft() {
      this.$router.push('/goods/list')
    },
    onRefresh() {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.isLoading = false
      }, 500)
    },
    onSubmit() {
      this.$notify({ type: 'success', message: '订单提交成功' })
    },
    async getcarlist() {
      for (let i = 0; i < this.$store.state.car.length; i++) {
        this.id.push(this.$store.state.car[i].id)
      }
      //  console.log(this.$store.state.car.length)
      const { data: res } = await this.$http.get(
        `/api/goods/getshopcarlist/${this.id.join(',')}`
      )
      console.log(this.$store.state.car, 77)
      this.carlist = res.message

      //  console.log(this.carlist);
    },
    onchange(value) {

    },
   onClose(clickPosition, instance,detail) {
      switch (clickPosition) {
        case 'outside':
          instance.close();
          break;
        case 'right':
        Dialog.confirm({
            message: '确定删除吗？'
          }).then(() => {
            instance.close();
           this.carlist.splice(detail,1)
            this.delete(detail.name)
            
            // console.log(detail);
            
          });
         
          break;
      }
   }
  }
}
</script>
<style lang="less" scoped>
.van-nav-bar {
  background-color: #1989fa;
}
.van-nav-bar__title {
  color: #fff;
}
.van-nav-bar .van-icon {
  color: #fff;
}
.van-nav-bar__text {
  color: #fff;
}
.van-card {
  margin: 10px 0;
}
.van-checkbox-group .van-checkbox {
  margin: 0 10px;
}
.van-swipe-cell .van-button {
  
  height: 140px;
}
.goshopping {
  color: #fff;
  background-color: #1989fa;
  border: 1px solid #1989fa;
}
.empty {
  width: 100%;
  padding: 15px 0;
  text-align: center;
}
</style>



